<template>
    <div class="TeahcerAdmin_main_css_box">
        <div class="TeahcerAdminleft_css_box">
            <div class="TeahcerAdminleft_top_css_box">
                <div class="TeahcerAdminleft_top_left_css_box">

                </div>
                <div class="TeahcerAdminleft_top_right_css_box">
                    <p style="line-height: 5vh;margin-left: 0.5vw;font-size:1.3vw;color:aliceblue;">谷谷学院管理系统</p>
                </div>
            </div>
            <div class="TeahcerAdminleft_below_css_box">
                <a-menu
                    :style="{ width: '17vw', height: '90vh' }"
                    theme="dark"
                >
                    <a-menu-item style="font-size:1.2vw; margin-bottom: 2.5vh;"  @click="toTableData">课程管理
                        <template #icon><icon-user /></template>
                    </a-menu-item>
                    <a-menu-item style="font-size:1.2vw; margin-bottom: 2.5vh;" @click="toClazz">文章管理
                        <template #icon><icon-tag /></template>
                    </a-menu-item>
                    <a-menu-item style="font-size:1.2vw; margin-bottom: 2.5vh;" @click="toGrade">上传视频
                        <template #icon><icon-calendar /></template>
                    </a-menu-item>
                    <a-menu-item style="font-size:1.2vw; margin-bottom: 2.5vh;" @click="toAdmin">编写笔记
                        <template #icon><icon-user-group /></template>
                    </a-menu-item>
                    <a-menu-item style="font-size:1.2vw; margin-bottom: 2.5vh;" @click="toPersonalCenter">个人信息管理
                        <template #icon><icon-common /></template>
                    </a-menu-item>
                </a-menu>
            </div>
        </div>
        <div class="TeahcerAdminright_css_box">
            <div class="TeahcerAdminright_top_css_box">
                <div class="TeahcerAdminright_top_left_css_box">
                    <div class="TeahcerAdminright_top_left_left_css_box">
                        <icon-menu-unfold style="transform: rotate(90deg);width: 6vw;height: 6vh;margin-left: -1vw;margin-top: 1.5vh;" />
                    </div>
                    <div class="TeahcerAdminright_top_left_right_css_box">
                        <a-breadcrumb style="margin-top: 3vh;margin-left: -3vw;">
                            <a-breadcrumb-item>首页</a-breadcrumb-item>
                            <a-breadcrumb-item>{{ $store.state.PageState}}</a-breadcrumb-item>
                        </a-breadcrumb>
                    </div>
                </div>
                <div class="TeahcerAdminright_top_right_css_box">
                    <div class="TeahcerAdminright_top_right_left_css_box">
                        <a-space size="large">
                            <a-avatar :size="64" shape="square" style="margin-top: 0.5vh;margin-left: 0.4vw;"><img :src="teacherImage"></a-avatar>
                        </a-space>
                        <b style="color:red" @click="Logout">退出登录</b>
                    </div>
                    <div class="TeahcerAdminright_top_right_right_css_box">
                        <b style="font-size:1.2vw;line-height: 9vh;">教师名:</b>
                        <a>{{ $store.state.teachername }}</a>
                    </div>
                </div>
            </div>
            <div class="TeahcerAdminright_below_css_box">
                <div class="TeahcerAdminright_below_top_css_box">
                    <a-space>
                        <a-tag closable>首页</a-tag>
                        <a-tag closable style="background-color: #66B98E;">{{ $store.state.PageState }}</a-tag>
                    </a-space>
                </div>
                <div class="TeahcerAdminright_below_content_css_box">
                    <div class="TeahcerAdminright_below_content_below_css_box">
                        <router-view />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { IconPlus, IconDelete } from '@arco-design/web-vue/es/icon';
import axios from 'axios'
import md5 from 'js-md5';
    export default {
        name:'TeahcerAdmin',
        data(){
            return{
                teacherImage:'',
                testvalue:'testcss'
            }
        },
        mounted(){
            var that=this
            axios.get('http://127.0.0.1/getteacherImage',{params:{
                userName:md5(that.$store.state.teachername)
            }}).then(function(res){
                that.teacherImage=res.data
            }).catch(function(error){
                console.log(error)
            })
        },
        methods:{
            Logout(){
                var that=this
                alert("退出成功")
                that.$store.commit("UpLoginState",false)
                that.$store.commit('updateTeacherName','未知')
                // that.$router.push('/TeahcerAdmin')
                that.$router.push('/')
            },
            toTableData(){
                this.$router.push('/TeahcerAdmin/Course')
                this.$store.state.PageState="课程管理"
                this.$store.state.LaberState=true
            },
            toClazz(){
                this.$router.push('/TeahcerAdmin/Article')
                this.$store.state.PageState="文章管理"
                this.$store.state.LaberState=true
            },
            toPersonalCenter(){
                this.$router.push('/TeahcerAdmin/TeacherPersonalCenter')
                this.$store.state.PageState="个人信息管理"
                this.$store.state.LaberState=false
            },
            toAdmin(){
                this.$router.push('/TeahcerAdmin/UpdateArticle')
                this.$store.state.PageState="上传文章"
                this.$store.state.LaberState=false
            },
            toGrade(){
                this.$router.push('/TeahcerAdmin/UpdataeCourse')
                this.$store.state.PageState="上传课程"
                this.$store.state.LaberState=false
            }
        },
        components:{
            IconPlus, 
            IconDelete,
        }
    }
</script>
<style>
    .TeahcerAdmin_main_css_box{
        width: 100vw;
        height: 100vh;
    }
    .TeahcerAdminleft_css_box{
        float: left;
        width: 17%;
        height: 100%;
        background-color:#353535;
    }
    .TeahcerAdminleft_top_css_box{
        width:100%;
        height: 10%;
    }
    .TeahcerAdminleft_top_left_css_box{
        float: left;
        width:25%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 80% 75%;
        background-image: url('../assets/logos.png');
    }
    .TeahcerAdminleft_top_right_css_box{
        float: left;
        width:75%;
        height: 100%;
    }
    .TeahcerAdminleft_below_css_box{
        width:100%;
        height: 90%;
    }
    .TeahcerAdminright_css_box{
        float: left;
        width: 83%;
        height: 100%;
    }
    .TeahcerAdminright_top_css_box{
        width: 100%;
        height: 10%;
    }
    .TeahcerAdminright_top_left_css_box{
        float: left;
        width:20%;
        height:100%;
    }
    .TeahcerAdminright_top_left_left_css_box{
        float: left;
        width:30%;
        height:100%;
    }
    .TeahcerAdminright_top_left_right_css_box{
        float: right;
        width:60%;
        height:100%;
    }
    .TeahcerAdminright_top_right_css_box{
        float:right;
        width:20%;
        height:100%;
    }
    .TeahcerAdminright_top_right_left_css_box{
        float: right;
        width:30%;
        height: 100%;
    }
    .TeahcerAdminright_top_right_right_css_box{
        float:right;
        width: 70%;
        height: 100%;
    }
    .TeahcerAdminright_below_css_box{
        width:100%;
        height: 90%;
    }
    .TeahcerAdminright_below_top_css_box{
        width:100%;
        height: 4%;
    }
    .TeahcerAdminright_below_content_css_box{
        width: 100%;
        height: 91%;
    }
    .TeahcerAdminright_below_below_css_box{
        width:100%;
        height: 5%;
    }
    .TeahcerAdminright_below_content_top_css_box{
        width:100%;
        height: 7%;
    }
    .TeahcerAdminright_below_content_below_css_box{
        width: 100%;
        height: 93%;
    }
    .TeahcerAdmintestcss{
        color:aliceblue;
    }
    .TeahcerAdmintestNewcss{
        color:blue;
    }
</style>  